<template>
  <!-- 标签 -->
  <div class="container">
    <div class="dashboard-container">
      <div class="app-container">
        <el-card shadow="never">
          <!-- 上半部分 -->
           <el-form :inline="true" class="demo-form-inline" :data="formData" ref="requestParameters">
                        <div class="filter-container">
                            <el-row type="flex" justify="end">
                                <el-col>
                                    <el-form-item label="标签名称">
                                        <el-input size="small" @keyup.enter="handleFilter" style="width: 200px;"
                                            class="filter-item" v-model="formData.tagName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态" style="margin-left: 40px;">
                                        <el-select size="small" v-model="formData.state" placeholder="请选择">
                                            <el-option label="启用" value="1"></el-option>
                                            <el-option label="禁用" value="0"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button size="small" class="filter-item" @click="resetFormed"
                                            style="margin-left: 15px;">清空</el-button>
                                        <el-button size="small" class="filter-item" type="primary"
                                            @click="handleFilter">搜索</el-button>
                                    </el-form-item>
                                </el-col>
                                
                                    <el-col :span="3">
                                        <el-button @click="$router.back()" icon="el-icon-back" type="text"
                                    v-if="subjectID ? true : false">返回学科</el-button>
                                        <el-button class="filter-item fr" size="small" style="margin-left: 10px" type="success"
                                    icon="el-icon-edit" @click="articlesDept">新增学科</el-button>

                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
          <!-- 数量提示条 -->
          <el-alert type="info" show-icon class="alert" :title="alertText">
          </el-alert>
          <!-- 下半部分 -->
          <!-- 数据 -->
          <div class="information">
            <el-table
              highlight-current-row
              style="width: 100%"
              v-loading="listLoading"
              :data="getArticles"
            >
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column label="所属学科" width="150r" prop="subjectName">
              </el-table-column>
              <el-table-column label="标签名称" prop="tagName"> </el-table-column>
              <el-table-column label="创建者" prop="username">
              </el-table-column>
              <el-table-column label="创建日期" width="200" prop="addDate">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="状态"
                width="260"
                prop="state"
                 :formatter="setState"
              >
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="260">
                <template v-slot="{ row }">
                  <el-button type="text" size="medium"
                                        @click="checkStatus(row.id, row.state)">{{ row.state === 1 ? '禁用' : '启用' }}</el-button>
                                    <el-button type="text" size="medium" :disabled="row.state === 1 ? true : false"
                                        @click="update(row)">修改</el-button>
                                    <el-button type="text" @click="delBtn(row)">删除</el-button>
                </template>
              </el-table-column>
              <!-- <div class="pagination">
                <PageTool
                  :paginationPage="requestParameters.page"
                  :paginationPagesize="requestParameters.pagesize"
                  :total="total"
                  @pageChange="handleCurrentChange"
                  @pageSizeChange="handleSizeChange"
                ></PageTool>
              </div> -->
            </el-table>
            <el-row
              type="flex"
              justify="end"
              align="middle"
              style="height: 60px"
            >
            </el-row>
          </div>
          <div class="pagination">
            <el-row
              type="flex"
              justify="end"
              align="middle"
              style="height: 60px"
            >
              <!-- 分页器 -->
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="requestParameters.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="requestParameters.pagesize"
                layout=" prev, pager, next,sizes, jumper"
                :total="total"
              />
            </el-row>
          </div>
        </el-card>
        <tagsAdd :showDialog.sync="showDialog" @updateFrom="list" :node="node" ref="update" />
      </div>
    
    </div>
  </div>
</template>

<script>
import { list, simple,update,changeState,remove,detail } from '@/api/hmmm/tags.js'
import PageTool from '../../module-dashboard/components/pageTool.vue'
import tagsAdd from '../components/tags-add.vue'
import EmploeeEnum from '@/api/base/baseApi.js'
export default {
    components: {
        PageTool,
        tagsAdd
    },
    data() {
        return {
            status: EmploeeEnum.status,
            getArticles: [],
            videoURL: '',
            total: 0,
            subjectID:this.$route.query.id,
            DialogIsShow:false,
            listLoading: true,
            alertText: '',
            DialogIsShow: false,
            videoIsShow: false,
            showDialog: false,
            requestParameters: {
                page: 1,
                pagesize: 10,
                title:''
            },
            node:{},
            formData:{
                tagName:'',
                state:''
            },
        }
    },
    created() {
        this.list()
    },
    methods: {
        async list() {
            this.listLoading = true
            const res = await list(this.requestParameters)
            const { counts, items } = res.data
            // console.log(res.data)
            this.getArticles = items
            this.total = counts
            this.alertText = `共 ${this.total} 条记录`
            this.listLoading = false
        },
        // 枚举状态
        setState(row) {
            const obj = this.status.find(item => item.id === String(row.state))
            // console.log(obj)
            return obj?.value ? obj?.value : '禁用'
        },
        // 点击新增学科显示弹窗
        articlesDept() {
            this.showDialog = true
        },
        // 改变状态
        async checkStatus(id, state) {
            try {
                if (state === 0) {
                    state = 1
                } else {
                    state = 0
                }
                await changeState({ id, state })
                await this.list()
                this.$message.success('更新成功')
            } catch (error) {
                console.log(error)
            }
        },
         // 清除
        resetFormed() {
            this.formData = {
              page: 1,
              pagesize: 10,
                tagName: '',
                state:''
            }
        },
        // 搜索信息
        async handleFilter() {
            this.listLoading = true
            this.requestParameters.tagName = this.formData.tagName
            this.requestParameters.state = this.formData.state
            const res=await this.list(this.requestParameters)
            console.log(res)
            this.listLoading = false
        },
        // 打开视频
        play(videoURL) {
            this.videoIsShow = true
            this.videoURL = videoURL
        },
        // 关闭视频
        close() {
            this.videoIsShow = false
        },
       // 删除学科
        async delBtn(id) {
            try {
                // 提示消息
                await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                // 调用接口
                await remove(id)
                // 重置数据
                this.list()
                // 提示删除成功
                this.$message.success('删除成功!')
                console.log(1);
            } catch (err) {
                console.log(err);
            }
        },
           // 修改学科
        async update(node) {
            this.showDialog = true
            this.node = node
            await this.$refs.update.detail(node)
        },
        // 改变时会触发--当前页
        handleCurrentChange() {
            this.list()
        },
        // pageSize 改变时会触发--每页条数
        handleSizeChange(val) {
            this.params.pagesize = val
            this.list()
        },
        // 重置
        resetForm() {
            this.$refs.requestParameters.resetFields()
        }
    }
}
</script>

<style scoped>
.pagination {
    margin-top: 10px;
}

.filter-container {
    padding-bottom: 0px !important;
}

.information {
    margin-top: 10px;
}

.alert {
    margin-top: 10px;
}

</style>
